<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Mootools UI - tree demo</title>
    <script type="text/javascript" src="../mootools-1.2-core-nc.js"></script>
    <script type="text/javascript" src="../mui.tree.js"></script>
    <script type="text/javascript"><!-- <![CDATA[
        
        
        
	var tree = new MUI.Tree("Bla");/*,
	    tree1 = new MUI.Tree("other bla"),
	    node = new MUI.Node("Bla"),
	    node1 = new MUI.LinkNode("Bla1", "http://digg.com"),
	    node2 = new MUI.Node("Bla2");
	//tree.addChild(node);
	tree.addChild(tree1);
	tree1.addChild(node1);
	tree1.addChild(node2);*/

	MUI.Tree.GlobalEvents.addEvent("onExpand", function(tree){
	    tree._titleEl.addClass("expanded");
	});
	
	MUI.Tree.GlobalEvents.addEvent("onCollapse", function(tree){
	    tree._titleEl.removeClass("expanded");
	});	

	window.addEvent("domready", function(){
	    //tree.render(true).injectInside(document.body);
	    //tree.expand(true);
	    //var tree = new MUI.Tree().bringIn($("t1"));
	    //var newtree = tree.render();
	    //$("t1").replaceWith(newtree);
	    $('t1').makeAsTree();
	});
    // ]]> --></script>
    <style type="text/css">
    body{
	/*direction:rtl;*/
    }
    
    div.mui-tree{
    }
    
    div.mui-tree ul, div.mui-tree ul ul{
	border-left:1px dotted #000;
	list-style-type:none;
	padding:0;margin:0;
	margin-left:1.5em;
	display:block;
	font-size:0.9em;
    }
    
    div.mui-tree ul li{
	padding-left:3px;
	margin:2px 0;
	line-height:1.5em;
	vertical-align:top;
    }
    
    
    div.mui-treetitle{
	cursor: default;
    }
    
    div.mui-treetitle:before{
	content: '>>'
    }
    
    div.mui-treetitle.expanded:before{
	content: '<<';
    }
    
    div.mui-treetitle:hover{
	background-color: yellow;
	display:inline;
	clear:both;
    }
   </style>
</head>
<body>
    <div class="mui-tree" id="t1">
	<div class="mui-treetitle"><a href="#">Title</a></div>
	<ul>
	    <li><span>BlaBla</span></li>
	    <li><span>BlaBla</span></li>
	    <li>
		<div class="mui-tree">
		    <div class="mui-treetitle">Sub Title</div>
		    <ul>
			<li><span>BlaBla</span></li>
			<li><span>BlaBla</span></li>
			<li><span>BlaBla</span></li>
			<li>
			    <div class="mui-tree">
				<div class="mui-treetitle">Sub Title</div>
				<ul>
				    <li><span>BlaBla</span></li>
				    <li>
					<div class="mui-tree">
					    <div class="mui-treetitle">Sub Title</div>
					    <ul>
						<li><span>BlaBla</span></li>
						<li><span>BlaBla</span></li>
						<li><span>BlaBla</span></li>
						<li><span>BlaBla</span></li>
						<li><span>BlaBla</span></li>
						<li>
						    <div class="mui-tree">
							<div class="mui-treetitle">Sub Title</div>
							<ul>
							    <li><span>BlaBla</span></li>
							    <li>
								<div class="mui-tree">
								    <div class="mui-treetitle">Sub Title</div>
								    <ul>
									<li><span>BlaBla</span></li>
									<li><span>BlaBla</span></li>
								    </ul>
								</div>
							    </li>
							</ul>
						    </div>
						</li>
						<li><span>BlaBla</span></li>
					    </ul>
					</div>

				    </li>
				</ul>
			    </div>
			</li>
			<li><span>BlaBla</span></li>
		    </ul>
		</div>
	    </li>
	    <li><span>BlaBla</span></li>
	    <li><span>BlaBla</span></li>
	    <li>
		<div class="mui-tree">
		    <div class="mui-treetitle">Sub Title</div>
		    <ul>
			<li><span>BlaBla</span></li>
			<li>
			    <div class="mui-tree">
				<div class="mui-treetitle">Sub Title</div>
				<ul>
				    <li><a href="digg.com">BlaBla</a></li>
				    <li>
					<div class="mui-tree">
					    <div class="mui-treetitle">Sub Title</div>
					    <ul>
						<li><span>BlaBla</span></li>
						<li>
						    <div class="mui-tree">
							<div class="mui-treetitle">Sub Title</div>
							<ul>
							    <li><span>BlaBla</span></li>
							    <li><span>BlaBla</span></li>
							</ul>
						    </div>
						</li>
						<li><span>BlaBla</span></li>
					    </ul>
					</div>

				    </li>
				</ul>
			    </div>
			</li>
		    </ul>
		</div>
	    </li>
	</ul>
    </div>
</body>
</html>
